<template>
  <div>
    <div class="Members_main" v-if="isShow">
      <div class="logo-box flex flex-between">
        <img src="@/assets/imgs/logo_icon.png" alt="" class="logo" />
        <div class="butn-list flex">
          <div class="link-btn" @click="goBuy">购买会员</div>
          <div class="link-btn" id="downloadButton">下载APP</div>
        </div>
      </div>
      <div class="Swipe" v-if="banner">
        <img :src="$imgUrl + banner.value" alt="" />
      </div>
      <div class="Members_item">
        <div
          v-html="replaceSpecialChar(showContent.value)"
          v-if="showContent"
        ></div>
      </div>

      <!-- 悬浮图标 -->
      <div class="icon icon1" @click="goMyNew">
        <img src="../assets/imgs/home_icon_haibao.png" alt="" />
      </div>
      <div class="icon icon2" @click="showKefu = true">
        <img src="../assets/imgs/home_icon_kefu.png" alt="" />
      </div>
      <div class="icon icon3" @click="goPersonalCenter">
        <img src="../assets/imgs/home_icon_wode.png" alt="" />
      </div>

      <van-overlay :show="showHaibao">
        <div class="wrapper">
          <div class="block">
            <div class="top">
              <h3>温馨提示</h3>
              <p>开通会员才可以生成个人海报~</p>
            </div>
            <div class="buttom">
              <span @click="showHaibao = false">取消</span>
              <span @click="showHaibao = false" style="color: #f8871b"
                >确定</span
              >
            </div>
          </div>
        </div>
      </van-overlay>

      <van-overlay :show="showKefu">
        <div class="wrapper" @click.stop="showKefu = false">
          <div class="block kefu">
            <div class="top">
              <h3>学易知客服二维码</h3>
              <div class="rwm" v-if="wxCode">
                <img :src="$imgUrl + wxCode.value" alt="" />
              </div>
            </div>
            <span class="code-btn">长按识别二维码</span>
          </div>
        </div>
      </van-overlay>
    </div>
    <div class="buy-box flex" v-if="isShow">
      <div class="left">
        会员权益<span v-if="vipPrice">￥{{ vipPrice.value || "" }}</span>
      </div>
      <div class="buy-btn2" @click="goBuy" v-if="!$store.state.isBuy">
        立即购买
      </div>
      <div class="buy-btn2" @click="goBuy" v-else>再次购买</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showHaibao: false,
      showKefu: false,
      banner: null,
      showContent: null,
      vipPrice: null,
      wxCode: null,
      isBuy: false,
      showBandPhone: false,
      phone: "",
      code: "",
      isSelect: true,
      isGet: false,
      reciprocal: 60,
      isShowAccount: false,
      passwordShow: "",
      isBind: true,
      isShow: true,
      creatData: null,
    };
  },
  created() {
    // if (this.$route.query && this.$route.query.code) {
    //   if (this.$store.state.sessionId == "") {
    //     this.wxLogin();
    //   } else {
    //     this.getAccountUserInfo();
    //     this.getImg();
    //     this.getShowContent();
    //     this.getVipPrice();
    //     this.getWxCode();
    //     this.checkVipOrder();
    //   }
    // } else {
    //   this.oauthLogin();
    // }
    // this.getAccountUserInfo()
    // this.getImg()
    // this.getShowContent()
    // this.getVipPrice()
    // this.getWxCode()
    // this.checkVipOrder()
  },
  mounted() {
    this.$nextTick(() => {
      //初始化
      var data = OpenInstall.parseUrlParams(); //解析获取参数
      new OpenInstall(
        {
          appKey: "tu0hm4",
          //channelCode : “xxx”,//渠道编号，可选
          //apkFileName : 'com.fm.openinstalldemo-v2.2.0.apk',//自定义下载时的apk包名
          preferWakeup: true,
          // mask:function(){
          // return
          // "<div  id='openinstall_shadow'style='position:fixed;left:0;top:0;background:rgba(0,255,0,   0.5);filter:alpha(opacity=50);width:100%;height:100%;z-index:10000;'>
          // </div>"
          // },//自定义打开时的遮罩样式

          //openinstall初始化完成的回调函数，可选
          onready: function () {
            var m = this;
            var button = document.getElementById("downloadButton");
            button.onclick = function () {
              m.wakeupOrInstall(); //下载或者拉起应用
              m.schemeWakeup();
              return false;
            };
          },
        },
        data
      );
    });
    //alert("获取图片");
    this.getImg();
    //alert("获取内容");
    this.getShowContent();
    //alert("获取价格");
    this.getVipPrice();
    this.getWxCode();
    //alert("最开始进来，code值：" + this.$route.query.code);
    if (this.$route.query && this.$route.query.code) {
      //alert("sessionId：" + this.$store.state.sessionId);
      if (this.$store.state.sessionId == "") {
        this.wxLogin();
      } else {
        //alert("获取信息");
        this.getAccountUserInfo();
        this.checkVipOrder();
      }
    } else {
      //alert("跳去授权");
      this.oauthLogin();
    }
  },
  methods: {
    //去购买
    goBuy() {
      if (!this.$store.state.isBind) {
        this.$store.commit("showBandPhone", true);
        this.$toast("请先绑定手机");
        return;
      }
      let ua = navigator.userAgent.toLowerCase();
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        //ios
        window.location.href = "http://h5.xueyizhi.cn/buy_members/";
      } else if (/(Android)/i.test(navigator.userAgent)) {
        this.$router.push("/buy_members/");
      }
      // this.$router.push('/buy_members/')
    },
    //跳转到我的海报
    goMyNew() {
      if (!this.$store.state.isBind) {
        this.$store.commit("showBandPhone", true);
        this.$toast("请先绑定手机");
        return;
      }
      // if (this.$store.state.userInfo.isVip == 1) {
      //   this.$router.push("/my_new");
      // } else {
      //   this.showHaibao = true;
      // }
      this.$router.push("/my_new");
    },
    //跳转个人中心
    goPersonalCenter() {
      this.$router.push("/personal_center");
    },
    // 微信登录
    oauthLogin() {
      // alert("跳去授权的链接"+ `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8efa9645f5461219&redirect_uri=` +
      //   window.location.href +
      //   `&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`);

      location.href =
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8efa9645f5461219&redirect_uri=` +
        window.location.href +
        `&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
    },
    //微信登录获取token
    wxLogin() {
      let _self = this;
      this.$Api
        .wxLogin({
          code: this.$route.query.code,
          parentId: this.$route.query.parentId
            ? this.$route.query.parentId
            : "",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.$toast.success("登录成功");
            _self.$store.commit("sessionId", res.data.sessionId);
            _self.getAccountUserInfo();
            _self.checkVipOrder();
          } else if (res.code == 3) {
            _self.$store.commit("isBind", false);
            _self.$store.commit("showBandPhone", true);
            this.creatData = res.data;
            this.creatData.parentId = this.$route.query.parentId
              ? this.$route.query.parentId
              : "";
            _self.$store.commit("creatData", this.creatData);
            let userInfo = {
              nick: res.data.nickName,
              avatar: res.data.headImgUrl,
              isVip: 0,
            };
            _self.$store.commit("userInfo", userInfo);
          }
          _self.getImg();
          _self.getShowContent();
          _self.getVipPrice();
          _self.getWxCode();
        });
    },
    //获取用户信息
    getAccountUserInfo() {
      let _self = this;
      this.$Api.getAccountUserInfo().then((res) => {
        if (res.code == 1) {
          _self.$store.commit("userInfo", res.data);
        } else if (res.code == 0) {
          _self.isShow = false;
          _self.$dialog.alert({
            title: "提示",
            message: "您的账号已冻结，请联系客服",
          });
        }
      });
    },
    //获取广告图
    getImg() {
      let _self = this;
      this.$Api
        .getMetaByKey({
          key: "h5AdImgUrl",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.banner = res.data;
          }
        });
    },
    //获取表达富文本
    getShowContent() {
      let _self = this;
      this.$Api
        .getMetaByKey({
          key: "h5ShowContent",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.showContent = res.data;
          }
        });
    },
    //获取vip价格
    getVipPrice() {
      let _self = this;
      this.$Api
        .getMetaByKey({
          key: "vipPrice",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.vipPrice = res.data;
          }
        });
    },
    //获取客服微信二维码
    getWxCode() {
      let _self = this;
      this.$Api
        .getMetaByKey({
          key: "h5WxCode",
        })
        .then((res) => {
          if (res.code == 1) {
            _self.wxCode = res.data;
          }
        });
    },
    //获取vip价格
    checkVipOrder() {
      let _self = this;
      this.$Api.checkVipOrder().then((res) => {
        if (res.code == 1) {
          _self.$store.commit("isBuy", res.data == 0 ? false : true);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Members_main {
  padding-bottom: 110px;
}
.buy-box {
  width: 100%;
  height: 110px;
  position: fixed;
  bottom: 0;
  left: 0;
  .left {
    width: 68%;
    height: 110px;
    line-height: 110px;
    text-align: center;
    font-size: 26px;
    color: #ff680d;
    background-color: #fff;
    span {
      font-size: 36px;
      font-weight: bold;
      margin-left: 12px;
    }
  }

  .buy-btn2 {
    width: 32%;
    height: 110px;
    line-height: 110px;
    text-align: center;
    background: linear-gradient(147deg, #ff9600 0%, #ff680c 100%);
    font-size: 28px;
    color: #ffffff;
  }
}
.logo-box {
  width: 100%;
  padding: 0 40px;
  height: 72px;
  box-sizing: border-box;
  .logo {
    width: 89px;
    height: 31px;
  }
  .link-btn {
    font-size: 26px;
    color: #59a3ff;
    margin-right: 40px;
    &:last-child {
      margin-right: 0;
    }
  }
}

.agreement {
  width: 100%;
  margin-bottom: 70px;
}
.agreement .select-box {
  width: 30px;
  height: 30px;
  margin-right: 16px;
}
.agreement .select-box .select {
  width: 100%;
  height: 100%;
  border: 1px solid #ff9102;
  border-radius: 50%;
}
.agreement .select-box .selected {
  width: 100%;
  height: 100%;
}
.agreement .agreenent-text {
  font-size: 28px;
  color: #999999;
}
.agreement .agreenent-text span {
  color: #ff9102;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 590px;
  height: 310px;
  background-color: #fff;
  padding: 42px;
  border-radius: 10px;
}
.block p {
  color: #999999;
  margin-top: 40px;
}
.block .buttom {
  text-align: right;
}
.block .buttom span {
  margin-left: 43px;
  color: #999999;
  font-weight: 600;
}
.kefu {
  width: 590px;
  height: 748px;
  text-align: center;
}

.kefu .rwm {
  margin: 44px auto;
  border: 1px #999 solid;
  border-radius: 10px;
  padding: 37px;
  width: 402px;
  height: 402px;
}

.kefu .code-btn {
  display: block;
  width: 402px;
  height: 88px;
  line-height: 88px;
  margin: 0 auto;
  border-radius: 50px;
  color: #fff;
  background: rgb(248, 135, 27);
}
.Swipe {
  width: 100%;
  margin: 0 0 8px 0;
}
.Members_main img {
  width: 100%;
  height: 100%;
}
.Members_item {
  padding: 0 17px;
  text-align: center;
}
.Members_item button {
  margin: 6px 0;
  width: 484px;
  height: 87px;
  line-height: 80px;
  border-radius: 50px;
  background: #ff9101;
  box-sizing: border-box;
  border: 5px #ffcc00 solid;
  color: #fff;
  font-weight: bold;
}
.Members_item button span {
  color: #ffcc00;
}

.Members_main .icon {
  position: fixed;
  right: 11px;
  width: 90px;
  height: 90px;
  border-radius: 100%;
}
.Members_main .icon1 {
  top: 30%;
}
.Members_main .icon2 {
  top: 69%;
}
.Members_main .icon3 {
  top: 78%;
}
</style>